<template>
	<div>
		<div class="nav">
			<ul>
				<li><router-link to="/film/nowPlaying">正在热映</router-link></li>
				<li><router-link to="/film/comingSoon">即将上映</router-link></li>
			</ul>
			<div class="navLine" :style="{transform:`translateX(${style})`}"></div>
		</div>
		<ul>
			<li v-for="item in films" :key="item.filmId">
				<img :src="item.poster" width="100" alt="">
				<p>{{item.name}} {{item.filmType.name}}</p>
				<p>观众评分{{item.grade}}</p>
			</li>
		</ul>
	</div>
</template>

<script>
	import {getFilm} from "../api/index.js";
	export default {
		data(){
			return {
				films:[] //电影列表
			}
        },
		computed:{
			style(){
				return this.$route.path==="/film/nowPlaying"?"0":"265%";
			}
		},
		watch:{
			$route:{
				handler(n){
					var type=n.params.type==="nowPlaying"?1:2;
					getFilm(type).then((res)=>{
						this.films=res.data.films;
						// console.log(this.films);
					})
				},
				immediate:true
			}
		}
		
	}
</script>

<style scoped>
	.nav{
		overflow: hidden;
	}
	.nav ul{
		display: flex;
		border-bottom:1px solid #ccc;
		
	}
	.nav ul li{
		flex:1;
	}
	.nav ul li a{
		display: block;
		width: 1.4rem;
		margin: auto;
		text-align: center;
	}
	.nav .navLine{
		border-bottom: 2px solid red;
		width: .7rem;
		position: relative;
		left:.6rem;
		transition: all .5s;
	}
</style>
